<template>
  <h1 class="row-title">
    基础用法
  </h1>
  <div class="row">
    <wl-dropdown placement="bottom" :menu-options="options" :visible-change="visibleChangeHandler"
      @select="selectHandler">
      <wl-button type="primary">Hover下拉菜单</wl-button>
    </wl-dropdown>
    <wl-dropdown placement="bottom" hideAfterClick trigger="click" :menu-options="options"
      :visible-change="visibleChangeHandler" @select="selectHandler">
      <wl-button type="primary">click</wl-button>
    </wl-dropdown>
  </div>

  <h1 class="row-title">
    支持VNODE节点
  </h1>
  <div class="row">
    <wl-dropdown placement="bottom" hideAfterClick trigger="click" :menu-options="options2"
      :visible-change="visibleChangeHandler" @select="selectHandler">
      <wl-button type="primary">click</wl-button>
    </wl-dropdown>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
const options = [
  { key: 1, label: 'item1' },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3' },
  { key: 4, label: 'item4' }
]
const options2 = [
  { key: 1, label: h('div', { calss: 'bar' }, 'hello') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3' },
  { key: 4, label: 'item4' }
]
const visibleChangeHandler = () => {
  console.log("visiblechangehandler")
}
const selectHandler = (val) => {
  console.log('selectHandler', val)
}
</script>

<style lang="scss" scoped></style>
